import styles from "../../index.module.less";
import { map } from "lodash";

const CARD_LIST = [
	{
		name: "当前速度",
		value: 0,
		key: "speed",
		unit: "km/h"
	},
	{
		name: "剩余里程",
		value: 0,
		key: "remainder",
		unit: "m"
	},
	{
		name: "总里程",
		value: 0,
		key: "allMileage",
		unit: "m"
	},
	{
		name: "当前电量",
		value: 0,
		key: "soc",
		unit: "%"
	}
];

interface Props {
	realTimeData: any;
}

export default (props: Props) => {
	const { realTimeData } = props;

	// 计算剩余里程：总里程 - 当前里程
	const calculateRemainingMileage = () => {
		if (!realTimeData) return 0;
		const allMileage = realTimeData.allMileage || 0;
		const currentMileage = realTimeData.currentMileage || 0;
		return parseFloat(Number(allMileage - currentMileage).toFixed(2));
	};

	// 获取显示值
	const getDisplayValue = (item: any) => {
		if (item.key === "currentMileage") {
			// 剩余里程使用计算值
			return calculateRemainingMileage();
		}
		// 其他字段使用原始值
		return realTimeData?.[item.key] !== undefined ? parseFloat(Number(realTimeData[item.key]).toFixed(2)) : 0;
	};

	return (
		<div className={styles.midModule}>
			{map(CARD_LIST, (item: any, index: number) => {
				return (
					<div className={styles.cardItem} key={index}>
						<div className={styles.info}>
							<div className={styles.value}>
								{getDisplayValue(item)}
								<span style={{ fontSize: "14px", marginLeft: "6px" }}>{item.unit}</span>
							</div>
							<div className={styles.label}>{item.name}</div>
						</div>
					</div>
				);
			})}
		</div>
	);
};
